// src/pages/shizhiran/height.tsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './gender.css';

const Height: React.FC = () => {
  const [unit, setUnit] = useState<'cm' | 'm'>('cm');
  const [height, setHeight] = useState<string>('168');
  const [isNextEnabled, setIsNextEnabled] = useState<boolean>(true);
  const navigate = useNavigate();

  const handleHeightChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    
    // 根据当前单位决定验证规则
    if (unit === 'm') {
      // 对于米单位，允许数字和小数点，最多两位小数
      if (/^\d*\.?\d{0,2}$/.test(value)) {
        setHeight(value);
        setIsNextEnabled(value !== '' && parseFloat(value) > 0);
      }
    } else {
      // 对于厘米单位，只允许整数
      if (/^\d*$/.test(value)) {
        setHeight(value);
        setIsNextEnabled(value !== '');
      }
    }
  };

  const handleNext = () => {
    console.log('Height:', `${height} ${unit}`);
    window.location.href = '/weight'; // 跳转到体重页
  };

  const handleBack = () => {
    navigate('/goal');
  };

  const handleSkip = () => {
    navigate('/weight');
  };

  return (
    <div className="container">
      <div style={{display: 'flex', justifyContent: 'space-between',alignItems: 'center',padding:'16px 0'}}>
        <button className="back-button" onClick={handleBack}>
          ←
        </button>
        <div className="progress-bar">
          <div className="progress" style={{ width: '34%' }}></div>
        </div>
        <button style={{fontSize:'14px',color:'#666',background:'none',border:'none'}} onClick={handleSkip}>跳过</button>
      </div>

      <div className="title">选择身高</div>

      <div className="unit-toggle">
        <button
          className={unit === 'm' ? 'active' : ''}
          onClick={() => setUnit('m')}
        >
          米
        </button>
        <button
          className={unit === 'cm' ? 'active' : ''}
          onClick={() => setUnit('cm')}
        >
          厘米
        </button>
      </div>

      <div className="input-container">
        <input
          type="text"
          value={height}
          onChange={handleHeightChange}
          maxLength={unit === 'm' ? 5 : 4}
          className="height-input"
        />
        <span className="unit-label">{unit}</span>
      </div>

      <button 
        className={`next-button1 ${isNextEnabled ? 'enabled' : 'disabled'}`}
        onClick={handleNext}
        disabled={!isNextEnabled}
      >
        下一步
      </button>
    </div>
  );
};

export default Height;